{% extends "./base.html" %}

{% load admin_utils %}
{% block main_content %}

<div id="data-list" style="width: 100%;" class="p20">

    <div>
        <div class="mb15 fr">
            <bk-checkbox-group v-model="filters" @change="handleFilter">
                <bk-checkbox :value="v" v-for="(k, v) of filterKeys" class="mr30">$[ k.description ]</bk-checkbox>
            </bk-checkbox-group>
        </div>
    </div>
    <bk-button :theme="'primary'" :title="'导出数据'" class="mr10" @click="handleExport">
        导出数据
    </bk-button>
    <bk-table
        :data="data"
        >
        <bk-table-column width="45" align="center">
            <template slot-scope="props">
                <img :src="props.row.logo_url" width="30"/>
            </template>
        </bk-table-column>
        <bk-table-column label="应用id">
            <template slot-scope="props">
                <a class="cell">$[props.row.code] </a>
            </template>
        </bk-table-column>
        <bk-table-column label="应用名称" prop="name"></bk-table-column>
        <bk-table-column label="最近操作人" prop="last_operator"></bk-table-column>
        <bk-table-column label="部署总次数" prop="total"></bk-table-column>
        <bk-table-column label="详情" prop="monthly_summary"></bk-table-column>
    </bk-table>
    <pagination
        class="mt15"
        :current.sync="pagination.curPage"
        :limit="pagination.limit"
        :count="pagination.count"
        :align="'right'"
    />
</div>
{% endblock %}

{% block main_script %}
<script>
const pagination = {{ pagination | to_json }}
const data = {{ data_list | to_json }}

// 过滤参数
let filterKeys = {
        'only_prod': {
            'description': '仅包括生产环境',
            'status': {{ only_prod | to_json }}
        },
}
let filters = []
Object.keys(filterKeys).forEach(key => {
    try {
        let value = filterKeys[key]['status']
        if (value.length === 1 && value[0] !== "0"){
            filters.push(key)
        }
    }catch (e) {

    }
})

document.addEventListener('DOMContentLoaded', () => {
    new Vue({
        el: "#data-list",
        delimiters: ['$[', ']'],
        data: function () {
            return {
                data,
                pagination,
                filters,
                filterKeys,
                active: undefined,
                SEARCH_PARAM: 'search_term',
                searchKey: undefined,
            }
        },
        methods: {
            searchApp() {
                let query = {
                    [this.SEARCH_PARAM]: this.searchKey, offset:0
                }
                this.goto(query)
            },
            handleFilter (cur) {
                let query = {}
                Object.keys(filterKeys).forEach(key => {
                    if (cur.indexOf(key) === -1) {
                        query[key] = 0
                    } else {
                        query[key] = 1
                    }
                })
                this.goto(query)
            },
            goto(query = {}) {
                let prefix = window.location.href

                if (prefix.indexOf("?") > 0) {
                    query = {...querystring.parse(prefix.substr(prefix.indexOf("?") + 1)), ...query}
                    prefix = prefix.substr(0, prefix.indexOf("?"))
                }
                query = querystring.stringify(query)
                window.location.href = `${prefix}?${query}`
            },
            handleExport: function () {
                let query = {}
                Object.keys(filters).forEach(key => {
                    query[filters[key]] = 1
                })
                query = querystring.stringify(query)
                url = decodeURI("{% url 'admin.operation.statistics.deploy.apps.export' %}")
                open(`${url}?${query}`)
            },
        },
    })

})
</script>

{% endblock %}
